<template>
	<!-- 架子 -->
	<view class="itemBox" >
		<view class="itemBox_item">
			<view class="item_one">
				<view class="shelfName">{{itemObj.frameName}}</view>
				<view class="shelfName">{{itemObj.p}}P</view>
				<view class="shelfName">{{itemObj.heatNum}}炉室</view>
				<view class="status" v-if="itemObj.isRun==='true'">
					<image src="../../static/index/yx.png" mode=""></image>
				</view>
			</view>
			<view class="item_two">
				<view class="item" v-if="itemObj.mainPipeTemp"><span>总管温度:</span><span class="unit">{{itemObj.mainPipeTemp}}℃</span></view>
				<view class="item" v-if="itemObj.mainPipePre"><span>总管负压:</span><span class="unit">{{itemObj.mainPipePre}}KPa</span></view>
				<view class="item" v-if="itemObj.naturalPressure"><span>天然气压力:</span><span class="unit">{{itemObj.naturalPressure}}KPa</span></view>
				<view class="item" v-if="itemObj.lxTemp1"><span>1#料箱温度:</span><span class="unit">{{itemObj.lxTemp1}}℃</span></view>
				<view class="item" v-if="itemObj.lxTemp2"><span>2#料箱温度:</span><span class="unit">{{itemObj.lxTemp2}}℃</span></view>
			</view>
			<view class="item_three" >
				<view class="item_three_box">
					<view class="itemT" v-for="(item,index) in itemObj.iList" :key="index" @click="goDetail(itemObj.frameName,item+1,itemObj.tableId)">
						<view class="itemT_chamber" :style="{ color:Math.abs(Number(itemObj.td[index]))>20?'#EB574B':Math.abs(Number(itemObj.td[index]))<10?'#00AC79':Math.abs(Number(itemObj.td[index]))<20?'#FF6F00':'#0F55B7',background:Math.abs(Number(itemObj.td[index]))>20?'#F97B71':Math.abs(Number(itemObj.td[index]))<10?'#70D0B4':Math.abs(Number(itemObj.td[index]))<20?'#FF9A4D':'#E0F0FA'}"   >{{item+1}}</view>
						<view class="itemT_bottom">
							<view class="itemT_bottom_eachLine"><span class="itemT_bottom_eachLine_name">温度:</span><span class="itemT_bottom_eachLine_unit">{{itemObj.temp[index]}}℃</span></view>
							<view class="itemT_bottom_eachLine"><span class="itemT_bottom_eachLine_name">温差:</span><span class="itemT_bottom_eachLine_unit" :style="{ color:Math.abs(Number(itemObj.td[index]))>20?'#EB574B':Math.abs(Number(itemObj.td[index]))<10?'#00AC79':Math.abs(Number(itemObj.td[index]))<20?'#FF6F00':'#000'  }">{{ itemObj.td[index] }}℃</span></view>
							<view class="itemT_bottom_eachLine" v-if="itemObj.np"><span class="itemT_bottom_eachLine_name">负压:</span><span class="itemT_bottom_eachLine_unit">{{itemObj.np[index]}}KPa</span></view>
							<view class="itemT_bottom_eachLine" v-if="itemObj.upPower"><span class="itemT_bottom_eachLine_name">上游功率:</span><span class="itemT_bottom_eachLine_unit">{{itemObj.upPower[index]}}%</span></view>
							<view class="itemT_bottom_eachLine" v-if="itemObj.downPower"><span class="itemT_bottom_eachLine_name">下游功率:</span><span class="itemT_bottom_eachLine_unit">{{itemObj.downPower[index]}}%</span></view>
							<view class="itemT_bottom_eachLine" v-if="itemObj.power"><span class="itemT_bottom_eachLine_name">功率:</span><span class="itemT_bottom_eachLine_unit">{{itemObj.power[index]}}%</span></view>
						</view>
					</view>
				</view>	
			</view>
			


		</view>
		
	

	</view>
</template>

<script setup>
	import { defineProps,computed,ref } from 'vue';
	const props = defineProps({
	  itemObj: Object
	});
	const goDetail=(frameName,item,tableId)=>{
		
		let queryString= `item=${item}&tableId=${tableId}&frameName=${encodeURIComponent(frameName)}`
		uni.navigateTo({
			url:`/pages/detailsChart/detailsChart?${queryString}`
		})
	}
	

</script>
<style>
	
</style>

<style lang="scss" scoped>
	.itemBox {
		
		
		&_item {
			
			width: 100%;
			// height: 800rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 6rpx 2rpx rgba(0, 0, 0, 0.16);
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			padding: 20rpx 14rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			position: relative;

			.item {
				width: 200rpx;
				margin-right: 26rpx;
			}

			.label {
			
			
				font-size: 20rpx;
				color: #333;
			}

			.labelValue {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #000;
			}

			.item_one {
				display: flex;
				margin-bottom: 12rpx;
				.shelfName{
					color: #0F55B7;
					font-size: 28rpx;
					font-weight: 550;
					margin-right: 4rpx;
				}
				.status{
					width: 58rpx;
					height: 58rpx;
					position: absolute;
					right: 0;
					top: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.item_two{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 20rpx;
				font-weight: 550;
				color: #000;
				margin-bottom: 22rpx;
				
				
				.item{
					width: 280rpx;
					
					.unit{
						margin-left: 4rpx;
					}
				}
			}
			.item_two:after {
			  content: "";
			  flex: auto;
			  
			}
			.item_three{
				&_box{
					display: flex;
					
					flex-wrap: wrap;
					width: 718rpx;
					.itemT{
						
						width: 164rpx;
						height: 192rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 6rpx 12rpx 2rpx #F2F2F2;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border: 1rpx solid #E5E5E5;
						margin-bottom: 14rpx;
						margin-right: 12rpx;
						
						
						&_chamber{
							
							width: 100%;
							height: 40rpx;
							font-weight: 550;
							text-align: center;
							background: #E0F0FA;
							color: #0F55B7;
							font-size: 24rpx;
							border-bottom: 1rpx solid #B5DFF9;
						}
						&_bottom{
							padding: 4rpx 6rpx 4rpx 6rpx;
							box-sizing: border-box;
							&_eachLine{
								
								margin-bottom: 8rpx;
								font-size: 15rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;
								&_name{
									color: #333333;
								}
								&_unit{
									color: #000;
									font-size: 21rpx;
									font-weight: 550;
								}
								
							}
						}
						
					}
					
					
				}
				&_box::after{
					content: "";
					flex: auto;
				}
				
			}

		
		}
	}
</style>